*{margin: 0;padding: 0;}
body {
    font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', sans-serif;
}
canvas{
    display: block;
    margin: 0 auto;
}
.loadcontainer {
    width: 100%;
}
#loadbgimg,#loadbgimg2{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
}
#loadbgimg2{
    z-index: -2;
}
.loadsection{
    position: absolute;
    top:7%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.loadprocess {
    position: absolute;
    z-index: 3;
    width: 200px;
    height: 7px;
    top:50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 32px;
    background: #ebedef;
}
#loadpercent{
    height: 20px;
    width: 100%;
    font: 18px/20px '苹方';
    text-align:center;
    font-weight: bold;
    color: #1c98b0;
    position: absolute;
    top: 2%;
    z-index: 1;
}
.loadprocess-passed {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: 32px;
    background: #1c98b0;
}
.shade {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hide {
    display: none;
}
/*4尺寸*/
@media screen and (min-width:320px) and (max-height:450px){
    .loadsection{
        top:7%;
    }
    .loadprocess {
        top:50%;
    }
}

/*5尺寸*/
@media all and (min-width:320px) and (max-height:530px){
    .loadsection{
        top:7%;
    }
    .loadprocess {
        top:50%;
    }
    #loadpercent{
        top:3%;
    }
}

/*6尺寸*/
@media all and (min-width:375px) and (max-height:630px){
    .loadsection{
        top:7%;
    }
    .loadprocess {
        top:50%;
    }
    #loadpercent{
        top:3%;
    }
}

/*6P尺寸*/
@media all and (min-width:414px) and (max-height:700px){
    .loadsection{
        top:7%;
        left: 10px;
    }
    .loadprocess {
        top:50%;
    }
    #loadpercent{
        top:3%;
    }
}